HTML5 এ Anchor Tag (<a>) ব্যবহার করে Hyperlinks তৈরি করা হয়। Hyperlink হল এমন একটি লিঙ্ক যা ব্যবহারকারীদের ওয়েব পেজের এক অংশ থেকে অন্য অংশে, অন্য পেজে, বা অন্য ওয়েবসাইটে নিয়ে যেতে পারে। Anchor ট্যাগের মাধ্যমে ইন্টারনাল ও এক্সটার্নাল উভয় ধরনের লিঙ্ক তৈরি করা যায়, এবং এটি একটি অত্যন্ত গুরুত্বপূর্ণ ট্যাগ যা ওয়েব পেজে নেভিগেশন সিস্টেম গঠনে সহায়ক। নিচে Anchor ট্যাগ এবং Hyperlinks তৈরি করার পদ্ধতি নিয়ে বিস্তারিত আলোচনা করা হলো।
Anchor Tag (<a>) এর গঠন
Anchor ট্যাগের গঠন নিচের মতো:
<a href="URL">Link Text</a>
<a>: Anchor ট্যাগ যা একটি Hyperlink তৈরি করে।hrefঅ্যাট্রিবিউট: এটি লিঙ্কের গন্তব্য নির্ধারণ করে। এটি একটি ওয়েব পেজ, ইন্টারনাল সেকশন, ইমেইল লিঙ্ক, বা ফোন নম্বর হতে পারে।- Link Text: এটি লিঙ্কে ক্লিক করার জন্য প্রদর্শিত টেক্সট।
Anchor Tag এবং Hyperlinks এর উদাহরণসমূহ
১. এক্সটার্নাল লিঙ্ক তৈরি করা
একটি ওয়েবসাইটের লিঙ্ক তৈরি করতে:
<a href="https://www.example.com">Visit Example Website</a>
ব্যাখ্যা:
hrefঅ্যাট্রিবিউটে"https://www.example.com"URL টি উল্লেখ করা হয়েছে।- Link Text হলো
"Visit Example Website"যা ইউজার ক্লিক করলে তাদের নির্দিষ্ট পেজে নিয়ে যাবে।
২. ইন্টারনাল লিঙ্ক তৈরি করা
ওয়েবসাইটের একই পেজে অন্য সেকশনে নেভিগেট করার জন্য:
<a href="#section1">Go to Section 1</a>
<h2 id="section1">Section 1</h2>
<p>This is the content of Section 1.</p>
ব্যাখ্যা:
href="#section1": এখানে#section1পেজের একটি নির্দিষ্ট সেকশন নির্দেশ করে। এটি একটি ইন্টারনাল লিঙ্ক।id="section1": যেখানে লিঙ্কটি নিয়ে যাবে, সেই সেকশনে একটিidঅ্যাট্রিবিউট সেট করা হয়েছে। এটি লিঙ্কের গন্তব্য নির্ধারণ করে।
৩. ইমেইল লিঙ্ক তৈরি করা
ইমেইল অ্যাড্রেসে ইমেইল পাঠানোর জন্য:
<a href="mailto:someone@example.com">Send Email</a>
ব্যাখ্যা:
href="mailto:someone@example.com": এটি ইমেইল ক্লায়েন্ট খুলে নির্দিষ্ট ইমেইল অ্যাড্রেসে মেইল পাঠানোর জন্য প্রস্তুত করে।- Link Text:
"Send Email"প্রদর্শিত হবে, যা ইউজারকে ইমেইল পাঠানোর সুযোগ দেবে।
৪. টেলিফোন লিঙ্ক তৈরি করা
ফোন নম্বর ডায়াল করার জন্য:
<a href="tel:+1234567890">Call Us</a>
ব্যাখ্যা:
href="tel:+1234567890": এটি একটি ফোন লিঙ্ক তৈরি করে, যা মোবাইল বা ডিভাইসে ক্লিক করলে ডায়ালার খুলবে।- Link Text:
"Call Us"প্রদর্শিত হবে, যা ইউজারকে ফোন নম্বরে কল করার সুযোগ দেবে।
৫. একটি ইমেজকে লিঙ্ক হিসেবে ব্যবহার করা
<a href="https://www.example.com" target="_blank">
<img src="image.jpg" alt="Example Image">
</a>
ব্যাখ্যা:
<a>ট্যাগ একটি ইমেজকে লিঙ্ক হিসেবে ব্যবহার করা হয়েছে। ক্লিক করলে এটি ইউজারকে"https://www.example.com"এ নিয়ে যাবে।target="_blank": লিঙ্কটি নতুন ট্যাবে খুলবে।
Anchor Tag এর গুরুত্বপূর্ণ অ্যাট্রিবিউট
১. href
- ব্যাখ্যা: গন্তব্য URL বা লোকেশন নির্ধারণ করে।
- মান: যেকোনো URL, ইন্টারনাল ID (যেমন
#section1),mailto:, বাtel:।
২. target
- ব্যাখ্যা: লিঙ্কটি কীভাবে খোলা হবে তা নির্ধারণ করে।
- মান:
_self: একই ট্যাবে লিঙ্কটি খুলবে (ডিফল্ট)।_blank: লিঙ্কটি নতুন ট্যাবে খুলবে।_parent: প্যারেন্ট ফ্রেমে লিঙ্ক খুলবে।_top: পুরো ব্রাউজার উইন্ডোতে লিঙ্ক খুলবে।
৩. title
- ব্যাখ্যা: লিঙ্কের একটি টুলটিপ বা ব্যাখ্যা প্রদর্শন করে যখন ইউজার মাউস হোভার করে।
- উদাহরণ:
৪. rel
- ব্যাখ্যা: লিঙ্ক এবং তার গন্তব্যের মধ্যে সম্পর্ক নির্দেশ করে, বিশেষ করে SEO এবং নিরাপত্তার জন্য গুরুত্বপূর্ণ।
- মান:
noopener: নিরাপত্তা বজায় রাখতে নতুন ট্যাবে খোলা লিঙ্কগুলোর জন্য।noreferrer: রেফারার তথ্য গোপন রাখে।nofollow: সার্চ ইঞ্জিনকে নির্দেশ করে লিঙ্কটি ফলো না করতে।
CSS ব্যবহার করে লিঙ্ক স্টাইলিং
<style>
a {
text-decoration: none; /* আন্ডারলাইন সরিয়ে দেয় */
color: blue; /* লিঙ্কের রঙ নির্ধারণ */
}
a:hover {
color: red; /* মাউস হোভার করলে রঙ পরিবর্তন */
text-decoration: underline; /* হোভার করলে আন্ডারলাইন যোগ হয় */
}
</style>
<a href="https://www.example.com">Styled Link</a>
ব্যাখ্যা:
text-decoration: none;: লিঙ্কের আন্ডারলাইন সরিয়ে দেয়।color: লিঙ্কের ডিফল্ট রঙ সেট করা হয়েছে।:hover: মাউস হোভার করলে আন্ডারলাইন এবং রঙ পরিবর্তন করে।
Content added By
Read more
